<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
		<title>设备联动</title>
		<link rel="stylesheet" type="text/css" href="../css/header.css">
		<script type="text/javascript" src="../script/api.js"></script>
		<script type="text/javascript" src="../script/mqttws31.js"></script>
		<script type="text/javascript" src="../script/jquery-2.1.3.js"></script>
		<script type="text/javascript" src="../script/mico_speech.js"></script>
		<style>
			* {
				margin: 0px;
				padding: 0px;
			}
			body {
				background-color: #EBEBEB;
				background-size: cover;
				font-family: "黑体";
				font-size: 13px;
			}
			.content {
				margin: 1px;
				padding: 1px;
			}
			.title {
				margin: 10px 12px 5px 12px;
				background-color: #FFFFFF;
				text-align: center;
				padding: 7px 0;
				box-shadow: 3px 3px 3px #e1e1e1;
			}
			.title span {
				color: #000000;
				font-size: 18px;
				position: relative;
			}
			.temphumishow {
				margin: 5px 12px;
				height: 94px;
				background-color: #FFFFFF;
				text-align: center;
				box-shadow: 3px 3px 3px #e1e1e1;
			}
			.temphumishow table tr td img {
				height: 50px;
			}
			.tempcls {
				font-size: 30px;
				color: #e13e4e;
			}
			.humicls {
				font-size: 30px;
				color: #80a72d;
			}
			.switrgbhow {
				margin: 5px 12px;
				height: 114px;
				background-color: #FFFFFF;
				text-align: center;
				box-shadow: 3px 3px 3px #e1e1e1;
			}
			.switrgbhow table tr td img {
				height: 70px;
			}
			.rgblight {
				margin: 5px 12px;
				background-color: #FFFFFF;
				text-align: center;
				box-shadow: 3px 3px 3px #e1e1e1;
				padding: 12px 0;
			}
			.rgblight table tr td img {
				height: 130px;
			}
			.humihis {
				margin: 5px 12px;
				height: 50px;
				background-color: #FFFFFF;
				text-align: center;
				box-shadow: 3px 3px 3px #e1e1e1;
			}
			#backleft {
				display: block;
			}
		</style>
	</head>
	<body>
		<!--顶部标题-->
		<header id="header" class="header">
			<a class="left" onclick="checkpage()" id="backleft"><img src="../image/smallicon-2.png" alt=""/></a>
			<span class="center" id="device_name">设备列表</span>
		</header>
		<div class="content">
			<div class="title">
				<span>温湿度实时检测</span>
			</div>
			<div class="temphumishow">
				<table width="100%" height="94px">
					<tr align="center">
						<td valign="middle" align="right"><img src="../image/01-temperature.svg" alt=""></td>
						<td valign="middle" align="left">&nbsp;&nbsp;<span>温度</span>
						<br/>
						&nbsp;&nbsp;<span class="tempcls" id="tempid">28℃</span></td>
						<td valign="middle" align="right"><img src="../image/01-humidity.svg" alt=""></td>
						<td valign="middle" align="left">&nbsp;&nbsp;<span>湿度</span>
						<br/>
						&nbsp;&nbsp;<span class="humicls" id="humiid">42%</span></td>
					</tr>
				</table>
			</div>
			<div class="rgblight">
				<table width="100%">
					<tr align="center">
						<td valign="middle"><img id="rgbimgid" src="../image/02-red.png" alt=""></td>
					</tr>
				</table>
			</div>
			<div class="switrgbhow">
				<table width="100%">
					<tr align="center" height="114px">
						<td valign="middle"><img id="switchbtn" src="../image/03-turn-on.png" alt="">
						<br/>
						<span id="switchspan">开</span></td>
						<td valign="middle"><img id="speechimgid" src="../image/yuyin.png" alt="">
						<br/>
						<span>语音控制</span></td>
					</tr>
				</table>
			</div>
			<div class="humihis">
				<br/>
				<div id="device_id"></div>
				<div id="debug"></div>
			</div>
		</div>
	</body>
	<script>
		var device_id;
		var micoMqtt = null;
		//听我指令
		var listenme = 0;
		apiready = function() {
			device_id = api.pageParam.deviceid;
			document.getElementById('device_name').innerHTML = api.pageParam.devicename;
			// 如果设备ID不为空，则执行连接MQTT的操作
			if (device_id !== null) {
				ez_connect(device_id);
			}
			if (api.systemType != 'ios') {
				api.addEventListener({
					name : "keyback"
				}, function(ret, err) {
					checkpage();
				});
			} else {
				$(".header").css("padding-top", "30px");
				$(".left").css("top", "32px");
			}
		};
		// 连接MQTT服务
		function ez_connect(device_id) {
			document.getElementById('device_id').innerHTML = "设备ID：" + device_id;
			//首先引用MiCOmqtt
			micoMqtt = api.require("micoMqtt2");
			var host = "api.easylink.io";
			var username = "";
			var password = "";
			//clientID，需要按照此标准来定义：v1-app-[MAC]	版本号-app-手机MAC(12位)
			var clientID = "v1-app-" + parseInt(Math.random() * (1000000000000), 12);
			var topic = device_id + '/out/#';
			micoMqtt.startMqtt({
				micoMqtt : micoMqtt,
				host : host,
				username : username,
				password : password,
				clientID : clientID,
				topic : topic
			}, function(ret, err) {
				if (ret.status) {
					console.log("连接成功");
					recvmsg();
				} else {
					console.log("连接失败");
				}
			});
		}

		// 接收数据
		function recvmsg() {
			var msgindex = 1;
			var msgjson;
			micoMqtt.recvMqttMsg(function(ret, err) {
				//				alert(JSON.stringify(ret));
				if (ret) {
					if (msgindex > 12) {
						msgindex = 1;
						document.getElementById('debug').innerHTML = "";
					}
					msgindex++;
					msgjson = ret.subs;
					var tempval = msgjson.dht11_temperature;
					if ("undefined" != typeof (tempval) && (0 == listenme)) {
						// 显示温度
						$("#tempid").text(tempval + "℃");
						// 显示湿度
						$("#humiid").text(msgjson.dht11_humidity + "%");
						// 温度超过29则红灯亮，20-29之间则绿灯亮，低于20黄灯亮
						if (tempval > 29) {
							led_red();
							$("#rgbimgid").attr("src", "../image/02-red.png");
						} else if (tempval < 30 && (tempval > 19)) {
							led_green();
							$("#rgbimgid").attr("src", "../image/02-green.png");
						} else if (tempval < 20) {
							led_yellow();
							$("#rgbimgid").attr("src", "../image/02-yellow.png");
						}
					}
				} else {
					api.alert({
						msg : err.msg
					});
				}
			});
		}

		// 控制按钮显示的事件
		$("#switchbtn").click(function() {
			var topic = device_id + '/in';
			var command;
			var swtimg = $("#switchbtn").attr("src");
			if ("../image/03-turn-on.png" == swtimg) {
				command = '{"device_switch":false}';
				$("#switchbtn").attr("src", "../image/03-turn-off.png");
				$("#switchspan").text("关");
			} else {
				command = '{"device_switch":true}';
				$("#switchbtn").attr("src", "../image/03-turn-on.png");
				$("#switchspan").text("开");
			}
			publishcmd(topic, command);
		});
		// 语音控制
		$("#speechimgid").click(function() {
			$("#speechimgid").attr("src", "../image/saying.gif");
			var obj = api.require('speechRecognizer');
			obj.record({
				vadbos : 5000,
				vadeos : 5000,
				rate : 16000
			}, function(ret, err) {
				if (ret.status) {
					obj.stopRecord();
					var says = ret.wordStr;
					$("#speechimgid").attr("src", "../image/yuyin.png");
					if (says.indexOf("指令") > -1) {
						if (says.indexOf("听") > -1) {
							listenme = 1;
						} else if (says.indexOf("取消") > -1) {
							listenme = 0;
						}
					} else {
						var topic = device_id + '/in';
						var command = speechCtrl(says);
						publishcmd(topic, command);
					}
				} else {
				}
			});
		});
		//发送指令
		function publishcmd(topic, command) {
			micoMqtt.publish({
				topic : topic,
				command : command
			}, function(ret, err) {
			});
		}

		function led_red() {
			var topic = device_id + '/in';
			var command = '{"rgbled_switch":true,"rgbled_hues":0, "rgbled_saturation":100, "rgbled_brightness":100}';
			publishcmd(topic, command);
		}

		function led_green() {
			var topic = device_id + '/in';
			var command = '{"rgbled_switch":true,"rgbled_hues":120, "rgbled_saturation":100, "rgbled_brightness":100}';
			publishcmd(topic, command);
		}

		function led_yellow() {
			var topic = device_id + '/in';
			var command = '{"rgbled_switch":true,"rgbled_hues":60, "rgbled_saturation":100, "rgbled_brightness":100}';
			publishcmd(topic, command);
		}

		// 日志打印在页面的部分
		var i = 0;
		console.log = ( function(old_funct, div_log) {
				return function(text) {
					old_funct(text);
					var p = '';
					if (i % 2 == 0)
						p = '<p>';
					else
						p = '<p class=\'gray\'>';
					if ( typeof text === "object")
						div_log.innerHTML += p + JSON.stringify(text) + '</p>';
					else
						div_log.innerHTML += p + text + '</p>';
					div_log.scrollTop = div_log.scrollHeight;
					i += 1;
				};
			}(console.log.bind(console), document.getElementById("debug")));
		console.error = console.debug = console.info = console.log;
		//		返回上一页
		function checkpage() {
			//关闭mqtt，关闭的时候需要同事关闭消息接收和MQTT连接
			micoMqtt.stopRecvMqttMsg(function(ret, err) {
			});
			micoMqtt.stopMqtt(function(ret, err) {
			});
			window.location.href = "./devlist.html";
		};
	</script>
</html>
